<template>
  <div class="login">
    <div class="header">
      <van-icon class="icon" @click="toHome" name="wap-home-o" />
      <div class="title">网易严选</div>
      <van-icon class="icon" @click="toSearch" name="search" />
      <van-icon class="icon" @click="toCart" name="cart-o" />
    </div>

    <img src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png" />
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <van-field v-model="user.phone" name="pattern" :rules="[{ pattern, message: '手机号码格式错误，请更换后重试' }]" ref="phone"
          center clearable placeholder="请输入手机号">
        </van-field>
        <van-field v-model="user.password" name="passwordVertify" type="password" center clearable
          :rules="[{ validator: passwordVertify, message: '请输入正确密码' }]" placeholder="请输入密码">
        </van-field>
        <van-field class="zero" center clearable readonly>
        </van-field>
      </van-cell-group>
      <div class="main">
        <div class="question">
          <div>遇到问题？</div>
          <div>使用密码验证登录</div>
        </div>
        <van-button class="phon btn" color="#DD1A21" block type="primary" native-type="submit" @click="getUserLogin">
          登录
        </van-button>
        <van-checkbox class="checkbox" v-model="checked" shape="square" icon-size="16px">同意<a href="#">《服务条款》</a>和<a
            href="#">《隐私设置》</a>和<a href="#">《网易严选服务协议》</a>
        </van-checkbox>
        <div class="other">其他登录方式></div>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reqUserLogin } from '../../api/login'
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';

import useLogin from '../../stores/login'
import { storeToRefs } from 'pinia';
const store = useLogin()

const { name, token } = storeToRefs(store)

let user = ref({
  phone: '18234285332',
  password: '12345678',
})

// 正则校验
const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 密码校验
const passwordVertify = (val) =>
  new Promise((resolve) => {
    showLoadingToast('验证中...');

    // setTimeout(() => {
    //   closeToast();
    //   console.log(val)
    //   console.log(val)
    //   console.log(val == user.value.password)

    // }, 1000);
    resolve(val == user.value.password);

  });
const onFailed = (errorInfo) => {
  console.log('请输入正确的账号或密码', errorInfo);
};

// 路由跳转
const router = useRouter()
// 复选框
const checked = ref(true);

// 登录
const getUserLogin = async () => {
  const result = await store.getReqUserLogin(user.value)

  // console.log(result);
  
  if (result) {
    router.push('/ucenter')
  } else {
    message('账号或密码不正确')
  }
}


function toHome() {
  router.push('/home')
}
function toSearch() {
  router.push('/search')
}
function toCart() {
  router.push('/cart')
}
</script>

<style lang="less" scoped>
.disabled {
  cursor: not-allowed;
}

.login {
  width: 100%;
  height: 100%;
  text-align: center;

  .header {
    height: 44px;
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .icon {
      font-size: 30px;
      padding-left: 10px;
    }

    .title {
      font-size: 20px;
      font-weight: 700;
      margin-left: 110px;
      margin-right: 50px;
    }
  }

  img {
    margin: auto;
    width: 134px;
    height: 45px;
    margin-top: 28px;
    margin-bottom: 30px;
  }

  .zero {
    height: 0;
  }

  .main {
    text-align: center;
    margin: 0 24px;

    .question {
      padding-bottom: 15px;
      display: flex;
      font-size: 16px;
      color: #7F7F7F;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .btn {
      width: 100%;
      margin-bottom: 16px;
    }

    .checkbox {
      font-size: 12px;
      text-align: left;
      // /deep/.van-checkbox__icon{
      //   line-height: 100px;
      // }
    }

    .other {
      font-size: 14px;
      margin-top: 40px;
    }
  }

}
</style>